<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>

<body>
  1. javascript是一门怎样的语言 他一哪些特点
  <div>
    <p>
      JavaScript是一种脚本语言
    </p>
    <p>
      js的特点
    <ul>
      <li>语法类似于常见的高级语言 如c/java </li>
      <li>脚本语言 不需要编译就可以由解释器直接运行</li>
      <li>变量松散定义 属于弱类语言</li>
      <li>面向对象</li>
    </ul>
    </p>
  </div>
  <hr>
  2. javascript 的本地对象，内置对象和宿主对象
  <div>
    <p>本地对象 Array obj regexp 等....可以进行new操作</p>
    <p>内置对象 gload math 等 不可进行实例化</p>
    <p>宿主对象 浏览器自带的document window 等...</p>
  </div>
  <hr>
  3. js的内置对象有哪些 列举array 和string 常用方法
  <div>
    <p>
      javascript 内置对象有 Array Object Date Math String JSON Function Boolean Object 是 所有对象的基类 采用原型链继承
    </p>
    <ul>
      <li>
        String: charCodeAt() 返回字符串第一个字符的 Unicode 编码(H 的 Unicode 值):
      </li>
      <li>
        String:indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置 如果没找到返回-1
      </li>
      <li>
        string: match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
      </li>
      <li>
        string: replace() 方法用于在字符串中用一些字符替换另一些字符 第一个值用来查找到想换的字符 , 第二个值用是要更换的值
      </li>
      <li>
        string: search() 方法用于在表单提交的时候执行js代码
      </li>
      <li>
        string: slice(s,e) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。 s是开始 e是截取到
      </li>
      <li>
        string: toUpperCase() 方法用于把字符串转换为大写。
      </li>
      <li>
        string: toLowerCase()方法用于把字符串转换为小写。
      </li>
    </ul>
    <ul>
      <li>
        Array : shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值 !!! 会改变原数组的长度
      </li>
      <li>
        Array: unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
      </li>
      <li>
        Array: push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
      </li>
      <li>
        Array: concat() 方法用于连接两个或多个数组。
      </li>
      <li>
        Array : reverse() 方法用于颠倒数组中元素的顺序。
      </li>
      <li>
        Array : splice() 方法用于添加或删除数组中的元素 !!!会改变原本数组
      </li>
    </ul>
    <script src="./js/String.js"></script>
  </div>
  <hr>
  4.列举 3种 强制转行和2种隐式转换
  <div>
    <p>强制 parseInt()取整 parseFloat()取浮点数 Number()转换成数字</p>
    <p>隐式 == 只判断内容是否相等 不判断类型 console.log() alert()</p>
  </div>
  <hr>
  5.操作 DOM 的常用 API
  <div>
    <ul>
      <li>
        查找 document.getElementByiId() document.getElementClassName()
      </li>
      <li>
        创建 document.createElement()创建元素 document.cloneNode() 克隆元素
      </li>
      <li>
        修改 document.appendChild() 插入元素 document.insertBefore 插入元素
      </li>
      <li>
        属性 : setAttribute getAttribute
      </li>
    </ul>
    <script src="./js/DOM_Api.js"></script>
  </div>
  <hr>
  6.BOM 常用api
  <div>
    navigator：window中封装浏览器属性和配置信息的对象
    cookieEnabled：识别浏览器是否启用cookie，返回值true/false
    userAgent：保存了浏览器名称和版本的字符串
    plugins：保存浏览器中所有插件信息的集合，每个plugin对象的name属性保存了插件的名称
    screen：保存显示屏信息的对象
    history：保存窗口的历史记录栈
    location：指代当前窗口正在访问的url地址对象
    location.href：保存了当前窗口正在访问的url地址，设置href属性为新url，会在当前窗口打开新url
    location.assign(url)：设置当前窗口的新url
    location.reload(true/false):true —— 无论是否更改，都获取更新；false —— 被修改的页面，重新获取，未被修改的页面，从缓冲获取
  </div>
  <hr>
  7. property 和 attribute 的区别：
  <div>
    <p>在修改标签原生属性的时候调用property</p>
    <p>在修改自定义属性的时候调用attribute </p>
  </div>
  <hr>
  8.用原生 js 实现一个倒计时项目？
  <p class="ps">倒计时</p>
  <hr>
  9.JS 的 typeof 返回哪种数据类型
  <div>
    <p>基本数据类型: String Boolean Number undefined null </p>
    <p>引用数据类型 object(Array Date,Function,regexp)</p>

  </div>
  <hr>
  10.如何判断是否为数组
  <div>
    <p class="item2"></p>
  </div>
  <hr>
  11.null 和 undefined 的区别？
  <div>

    null表示没有对象，即该处不应该有值
    <ol>
      <li>
        作为函数的参数，表示该函数的参数不是对象
      </li>
      <li>
        作为对象原型链的终点
      </li>
    </ol>
    undefined表示缺少值，即此处应该有值，但没有定义
    <ol>
      <li>
        定义了形参，没有传实参，显示undefined
      </li>
      <li>
        对象属性名不存在时，显示undefined
      </li>
      <li>
        函数没有写返回值，即没有写return，拿到的是undefined
      </li>
      <li>
        写了return，但没有赋值，拿到的是undefined
      </li>
    </ol>

  </div>
  <hr>
  12.new 操作符具体干了什么呢?
  <div>
    <ol>
      <li>生成了一个空对象,并且this变量引用该对象,同时还继承了该函数的原型</li>
      <li>属性和方法被加入到this中</li>
      <li>新创的对象由this所引用,并且最后隐式的返回this</li>
    </ol>
  </div>
  <hr>
  13.js 中深拷贝和浅拷贝的区别
  <div>
    <p>浅拷贝只能复制对象的指针，不能复制对象本身，新旧数据共享一块内存</p>
    <p>深拷贝 会创建一个新的对象 跟原本对象不共享内存 修改新对象不会修改到原本的对象</p>
    <script>
      function isObject(obj) {
        //判断obj是否为对象
        return Object.prototype.toString.call(obj) === "[object Object]";
      }
      function cloneDeep(obj) {
        if (!isObject(obj)) {
          return;
        }
        let keys = Reflect.ownKeys(obj);
        let cloneObject = {};
        for (let item of keys) {
          //object 是属性名  字符串
          let key = item;
          // object的属性key对应值value
          let value = obj[key];
          if (isObject(value)) {
            cloneObject[key] = cloneDeep(value);
          } else {
            cloneObject[key] = value;
          }
        }
        return cloneObject;
      }
      function i() {
        var o = Object.create(a, {
          name: {
            value: 'zhangsan',
            writable: false
          },
          age: {
            value: null,
            writable: true
          },
          fn: {
            configurable: false,
            get: function () {
              console.log(this.name);
            },
            set: function (newValue) {
              this.age = newValue;
              console.log(this.name + ' : ' + this.age);
            }
          }
        });
      }
    </script>
  </div>
  <hr>
  14.什么是回调地狱 怎么解决回调地狱
  <div>
    <p>回调地狱是 一个异步函数中调用另一个异步函数.... 都要等当前的函数执行完了 才会执行里面的函数</p>
    <p>如何解决回调地狱 模块化开发 避免函数嵌套 使用promise</p>
  </div>
  <hr>
  15.对 ES6 中 Promise 的理解？
  <div>
    <p>promise 可以解决回调地狱 可以实现异步函数同步化 代码执行时有三个状态两个结果
    <p> pending 表示初始状态可以转移状态</p>
    <p> fulfilled:表示操作成功 不可转移 可以使用.then()</p>
    <p> rejected:表示操作失败 不可转移 可以使用.then()/catch() </p>
    在最后的时候会返回一个新的promise对象
    </p>
  </div>
  <hr>
  16.谈谈你对 this 理解
  <div>
    <p>this在事件中一般指向调用者, 普通函数指向window ，定时器中指向window,构造函数中this指向当前构造对象本身</p>
  </div>
  <hr>
  17.Js 的原型和原型链？原型链的应用？
  <div>
    <p>
      每个对象都会在其内初始化一个属性,就是prototype(原型),当访问一个对象的属性时,如果他没有这个属性,他就会跟着找prototype里找这个属性，这个prototype又会有自己的prototype，于是会一直向上找下去,找到最后是会找到null的
    </p>
  </div>
  <hr>
  18.几种常用的继承方式？
  <div>
    <ul>
      <li>prototype</li>
      <li>apply()和call</li>
      <li></li>
    </ul>


  </div>
  <script>
    // prototype
    function Animal(name, color, say) {
      this.name = name;
      this.color = color;
      this.say = function () { console.log('喵喵喵'); }
    };
    Animal.prototype.cry = function () { console.log('呜呜呜'); }
    var cat = new Animal('cat', 'white');
    //利用 apply(),和 call 实现继承
    function person(name, age) {
      this.name = name;
      this.age = age;
    }
    function man(name, age) {
      person.apply(this, [name, age]); //这里就是伪造成 person 的一个事例
    }
    var Man = new man('wozien', 12);
    console.log(Man.name);
    console.log(Man.age);
    // 3、组合 call+prototype，最常用的一种方
    function person(name) {
      this.name = name;
    }
    person.prototype.showName = function () {
      return this.name;
    }
    function man(name, age) {
      person.call(this, name);
      this.age = age; //这里就是伪造成 person 的一个事例
    } man.prototype = new person();
    man.prototype.showAge = function () {
      return this.age;
    };
    var Man = new man('wozien', 12);
    Man.showName(); //wozien Man.showAge(); //12
  </script>
  <hr>

</body>
<script>

</script>

</html>